<template>
    <div>
        <div class="app-container flex-box">
            <div class="input-form">
                <el-form :rules="formRules" ref="dataForm" :model="bean" label-position="right" label-width="100px"
                         style=' max-width:1000px;margin-left:50px;'>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="岗位名称" prop="name">
                                <el-input v-model="bean.name" placeholder="输入岗位名称" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="招聘状态" prop="show_wechat">
                                <el-radio v-model="bean.show_wechat" label="1">上线</el-radio>
                                <el-radio v-model="bean.show_wechat" label="2">下线</el-radio>
                            </el-form-item>
                            <el-form-item label="应聘表单" prop="job_type" v-if="company.template">
                                <el-select style="" class="filter-item" v-model="bean.job_type"
                                           placeholder="指定应聘表单">
                                    <el-option v-for="(item,index) in job_type_list" :key="item.data_value" :label="item.data_text"
                                               :value="item.data_value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="应聘表单" prop="template_id" v-else>
                                <el-select style="" class="filter-item" v-model="bean.template_id"
                                           placeholder="指定应聘表单">
                                    <el-option v-for="(item,index) in template_list" :key="item.data_value" :label="item.data_text"
                                               :value="item.data_value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="岗位工种" prop="worker_type">
                                <el-select style="" class="filter-item" v-model="bean.worker_type"
                                           placeholder="指定应聘表单">
                                    <el-option v-for="(item,index) in worker_type_list" :key="item.data_value" :label="item.data_text"
                                               :value="item.data_value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="需求人数" prop="enlis_people">
                                <el-input v-model="bean.enlis_people" placeholder="输入岗位需求人数" ></el-input>
                            </el-form-item>
                            <el-form-item label="工作地址" prop="work_place">
                                <el-input v-model="bean.work_place" placeholder="选择工作地址"
                                          @focus="openAddressWin"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="contact_mobile">
                                <el-input v-model="bean.contact_mobile" placeholder="输入联系电话" ></el-input>
                            </el-form-item>
                            <el-form-item label="联系人员" prop="contact_person">
                                <el-input v-model="bean.contact_person" placeholder="输入联系人员" ></el-input>
                            </el-form-item>
                            <el-form-item label="岗位性质" prop="job_time_type">
                                <el-radio v-model="bean.job_time_type" label="0">长期工</el-radio>
                                <el-radio v-model="bean.job_time_type" label="1">小时工</el-radio>
                            </el-form-item>
                            <el-form-item label="薪资待遇" prop="salary_type">
                                <el-radio v-model="bean.salary_type" label="0">薪资面议</el-radio>
                                <el-radio v-model="bean.salary_type" label="1">填写范围</el-radio>
                            </el-form-item>
                            <el-form-item label="填写范围" v-if="bean.salary_type==1">
                                <el-input v-model="bean.min_salary" placeholder="起始工资" style="width:40%"></el-input> -
                                <el-input v-model="bean.max_salary" placeholder="终点工资" style="width:40%"></el-input>
                            </el-form-item>
                            <el-form-item label="性别要求" prop="gender">
                                <el-radio v-model="bean.gender" label="0">不限性别</el-radio>
                                <el-radio v-model="bean.gender" label="1">男</el-radio>
                                <el-radio v-model="bean.gender" label="2">女</el-radio>
                            </el-form-item>
                            <el-form-item label="年龄要求" >
                                <el-input v-model="bean.min_age" placeholder="起始年龄" style="width:40%"></el-input> -
                                <el-input v-model="bean.max_age" placeholder="终止年龄" style="width:40%"></el-input>
                            </el-form-item>
                            <el-form-item label="经验要求" prop="work_experience">
                                <el-radio v-model="bean.work_experience" label="0">不限</el-radio>
                                <el-radio v-model="bean.work_experience" label="1">有经验</el-radio>
                            </el-form-item>
                            <el-form-item label="学历要求" prop="education" >
                                <el-select style="" class="filter-item" v-model="bean.education"
                                           placeholder="选择学历">
                                    <el-option v-for="(item,index) in education_list" :key="item.data_value" :label="item.data_text"
                                               :value="item.data_value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="奖励描述" prop="salary_recommend">
                                <el-input v-model="bean.salary_recommend" placeholder="输入奖励描述" ></el-input>
                            </el-form-item>
                            <el-form-item label="奖励金额" prop="salary_money">
                                <el-input v-model="bean.salary_money" placeholder="输入奖励金额" ></el-input>
                            </el-form-item>
                            <el-form-item label="工作要求" prop="work_require">
                                <el-input v-model="bean.work_require" placeholder="输入工作要求" type="textarea" :rows="3"></el-input>
                            </el-form-item>
                            <el-form-item label="薪资说明" prop="salary_desc">
                                <el-input v-model="bean.salary_desc" placeholder="输入薪资说明" type="textarea" :rows="3"></el-input>
                            </el-form-item>
                            <el-form-item label="公司福利" prop="company_welfare">
                                <el-input v-model="bean.company_welfare" placeholder="输入公司福利" type="textarea" :rows="3"></el-input>
                            </el-form-item>
                            <el-form-item label="通用福利" prop="benefit_list">
                                <el-checkbox-group v-model="bean.benefit_list">
                                    <el-checkbox label="包吃"></el-checkbox>
                                    <el-checkbox label="包住"></el-checkbox>
                                    <el-checkbox label="长白班"></el-checkbox>
                                    <el-checkbox label="坐着上班"></el-checkbox>
                                    <el-checkbox label="夜班补贴"></el-checkbox>
                                    <el-checkbox label="年度旅游"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <el-button type="primary" @click="doSubmit" :loading="dealing"
                   style="width:240px;margin:20px auto;display:block;">保存
        </el-button>
        <addressMapPicker @addressDialogClose="addressDialogClose" v-if="addressDialogVisible" :address_id="bean.address_id"></addressMapPicker>
    </div>
</template>
<script>
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import Validator from '@/utils/validate'
	import Auth from '@/auth'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
	import {mapGetters} from 'vuex'
	import addressMapPicker from '@/components/addressMapPicker'

	export default {
		directives: {waves},
		data() {
			return {
				formRules: {
					template_id: [{required: true, message: '请选择应聘表单', trigger: 'blur'}],
					job_type: [{required: true, message: '请选择应聘表单', trigger: 'blur'}],
					worker_type: [{required: true, message: '请选择岗位工种', trigger: 'blur'}],
					enlis_people:[{required: true, message: '请填写需求人数', trigger: 'blur'}],
					work_place:[{required: true, message: '请填写工作地点', trigger: 'blur'}],
					contact_mobile:[{required: true, message: '请填写联系电话', trigger: 'blur'}],
				},
				job_type_list:Store.getters.basedata.job_type,
				worker_type_list:Store.getters.basedata.worker_type,
				template_list:Store.getters.basedata.template_id,
				education_list:Store.getters.basedata.education,
				company:Store.getters.user.company,
				dialogParamVisible: false,
				dealing: false,
				bean: {
					show_wechat:'1',
					job_time_type:'0',
					salary_type:'0',
					gender:'0',
					work_experience:'0',
					benefit_list:[]
                },
				imgs:[],
				addressDialogVisible: false
			}
		},
		computed: {
			...mapGetters([
				'basedata',
			]),
		},
		components: {
			addressMapPicker
		},
		created() {
			var job_id = this.$route.query.job_id
			if (job_id) {
				Http.getModel(API.get_job, {id:job_id}, false).then((json) => {
					this.dealing = false
					if (json.code == 0) {
						let bean = json.data;
						if(bean.ext_info&&bean.ext_info!="null"){
							bean.ext_info = JSON.parse(bean.ext_info);
						}else{
							bean.ext_info = {
								work_place: bean.dept_info.address ? bean.dept_info.address : '' ,
								address_id: bean.dept_info.address_id ? bean.dept_info.address_id : ''
							};
						}
						var obj_bean = bean.ext_info;
						obj_bean.name = bean.name;
						obj_bean.id = bean.id
						this.bean = _.extend(obj_bean,this.bean);
						console.log("bean:",this.bean)
					} else {
						Msg.error(json.msg)
					}
				})
			}
		},
		methods: {
			openAddressWin() {
				this.addressDialogVisible = true
			},
			addressDialogClose(address,address_id){
				this.addressDialogVisible = false
				if(address){
					this.bean.address = address
					this.bean.address_id = address_id
				}
			},
			doSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {

						if(this.bean.salary_type=='1'){
							if(!this.bean.min_salary){
								Msg.error('请填写起始薪资');
								return false
							}
							if(!this.bean.max_salary){
								Msg.error('请填写终点薪资');
								return false
							}
							var reg = /^[1-9]\d*$/;
							if(!reg.test(this.bean.min_salary)){
								Msg.error('起始薪资应为数字');
								return false
							}
							if(!reg.test(this.bean.max_salary)){
								Msg.error('终点薪资应为数字');
								return false
							}
						}
						this.dealing = true
                        var params = {
                            id:this.bean.id,
							ext_info:JSON.stringify(this.bean),
                            show_wechat:this.bean.show_wechat
                        }
						Http.getModel(API.save_job, params, false).then((json) => {
							this.dealing = false
							if (json.code == 0) {
								Msg.success(json.msg, () => {
									let auth_token = Store.getters.token
									if (!Validator.isEmpty(auth_token)) {
										Auth.getUserByToken(auth_token).then((json) => {
											if (json.code == 0) {
												let user = json.data
												Store.commit("SET_USER", user)
												Store.commit("SET_COMPANY", user.company)
											}
										})
									}
									this.$router.back();
									var view = {
										name: "jobEditor",
										path: "/job/editor",
										title: "jobEditor"
									}
									this.$store.dispatch('delVisitedViews', view).then((views) => {})
								})
							} else {
								Msg.error(json.msg)
							}
						})
					}
				})
			},
			onUploadTopImg(obj) {
				new Qiniu().upload(obj.file, (url) => {
					console.log("url:", url);
					this.$set(this.bean,'logo',url);
					console.log('this.bean:', this.bean)
				})
			},
			onUploadBottomImgs(obj) {
				new Qiniu().upload(obj.file, (url) => {
					this.imgs.push({url: url})
				})
			},
			uploadBottomExceed() {
				Msg.error("最多只能传9张图片！")
			},
			onRemoveBottom(a, list) {
				this.bean.img_list = list
			},
			beforeUpload(file) {
				let result = true;
				let index = _.indexOf(['image/jpeg', 'image/jpg', 'image/png'], file.type);
				if (index < 0) {
					Msg.error('上传图片只能是 jpg 或 png 格式!');
					result = false;
				}
				if ((file.size / 1024 / 1024) > 0.1) {
					Msg.error('上传图片大小不能超过 100KB!');
					result = false;
				}
				return result;
			},
			showBigImg(file) {
				this.bigImageUrl = file.url;
				this.bigImageVisible = true;
			}
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .top-imgs-ct {
        img {
            display: inline-block;
        }
    }

    .flex-box {
        display: flex;
        .input-form {
            flex: 1
        }
        .upload-form {
            flex: 1
        }
    }

    .el-select, .el-cascader--medium {
        width: 100%;
    }

    .img, video {
        width: 146px;
        height: 146px;
    }
</style>
